<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>班级通知</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/school_notice.css" />

	<style>
		.half {
			display: inline-block;
			width: 49%;
			box-sizing: border-box;

		}

		.half.left {
			padding-left: 3%;
			font-size: 10px;
			color: grey;
		}

		.half.right {
			text-align: right;
		}

		.info_foot {
			width: 100%;
			height: 2em;
			line-height: 2em;
		}

		.publisher-name {
			font-size: 15px;
			width: calc(100% - 9em);
			overflow: hidden;
			margin: 0;
			float: left;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			margin-left: 0.25em;
			vertical-align: bottom;
		}

		.release-time {
			font-size: 11px;
			/*width: 10em;*/
			float: right;
			margin: 0;
			margin-right: 0.5em;
			vertical-align: bottom;
		}

		.del {
			float: right;
			width: 1.125rem;
			height: 1.125rem;
			margin-top: 0.5rem;
			margin-right: 0.25rem;
		}

		.title {
			font-size: 16px;
			width: 100%;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			font-weight: bold;
		}
	</style>

</head>

<body>
	<div id="container">
		<div class="contain" id="vue-root">
			<div class="header" style="margin-bottom: 40px;">
				<div class="header_title">班级通知</div>
				<a onclick="history.back()">
					<img src="image/return.png" alt="" class="return">
				</a>
				<a href="teacher/classes_notice_item.html" v-if="isTeacher">
					<img src="image/add.png" class="heder-add" />
				</a>
			</div>
			<div style="height: 40px;"></div>
			<div v-for="notice in notices" :key="notice.id" class="notice_info">
				<div class="info_foot" style="border-bottom: 1px solid silver;">
					<img src="image/delete.png" class="del" v-if="isTeacher" @click="del(notice.id)" />
					<p class="release-time" v-text="format(notice.time)"></p>
					<p class="publisher-name" v-if="!isTeacher" v-text="notice.teacherName"></p>
				</div>
				<div class="info_header">
					<div class="title" v-text="notice.title"></div>
				</div>
				<div class="img_box" v-if="notice.pic">
					<img class="notice_img" :src="getImg(notice.pic)" />
				</div>
				<div class="info_center" v-text="getText(notice.text)"></div>
				<div style="padding-bottom: 10px;">
					<div class="half left">
						<template v-if="isTeacher||notice.showRead">
							<img src="/wechat/image/eye.svg" style="vertical-align: middle;">
							<span v-text="notice.readCount"></span>
						</template>
					</div>
					<a :href="'classes_notice_count.html?id='+notice.id">
						<div class="half right">【点击查看详情】</div>
					</a>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				isTeacher: isTeacher(),
				notices: [],
				schoolId: getPerson().schoolId
			},
			created: function () {
				this.getData();
			},
			methods: {
				getData: function () {
					var url = this.isTeacher ? '/t/classNotice2' : '/s/classNotice';
					axios.get(url).then(function (res) {
						this.notices = res.data;
					}.bind(this));
				},
				del: function (id) {
					if (!confirm('确定删除该通知？')) return;
					axios.post('/t/classNotice/del/' + id).then(function (res) {
						this.getData();
					}.bind(this));
				},
				getImg: function (pic) {
					return '/static/' + this.schoolId + '/classes_notice/' + pic;
				},
				format: function (time) {
					if (new Date().toLocaleDateString() == dayjs(time).format('YYYY-MM-DD') || new Date().toLocaleDateString() == dayjs(time).format('YYYY/MM/DD')) {
						return dayjs(time).format('HH:mm:ss');
					}
					return dayjs(time).format('YYYY-MM-DD');
				},
				getText: function (html) {
					var b = document.createElement('div');
					b.innerHTML = html;
					var a = b.innerText;
					b.remove();
					if (a && a.length > 150)
						a = a.substr(0, 150) + '...';
					return a;
				},
			}
		});

		updateUnread('classesNotice');

	</script>

</body>

</html>